<style lang="scss" scoped>
.app-container {
  background: #F3F5FF;
  padding: 30px;

  /*搜索*/
  ::v-deep.el-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 10px;
    background: #3A84FF;
    border-radius: 16px 16px 0 0;

    .el-form-item {
      margin-bottom: 0 !important;
    }

    .rows {
      width: 82%;
      flex-wrap: wrap;

      .cols {
        width: 200px;
        margin: 0 10px 10px 0;

        .el-input__inner {
          background: #fff;
          border: 0;
          font-size: 12px;
          width: 200px;
          height: 38px;
          color: #0060FF;
        }
      }
    }
  }

  .btns {
    display: flex;
    margin-bottom: 10px;

    ::v-deep.el-button {
      background-color: #fff;
      margin-left: 12px;
      color: #3380FD;

      .el-icon-plus {
        &::after {
          content: "";
          font-weight: bold;
        }
      }
    }

    .wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background: #FFFFFF;
      border: 1px solid #116BFF;
      margin-left: 12px;
      cursor: pointer;
    }
  }

  /*radio*/
  .el-radio-group {
    width: 100%;
    padding: 20px 20px 10px;
    border-radius: 0 0 16px 16px;
    background: rgba(255, 255, 255, 0.7);

    .el-radio {
      margin-bottom: 8px;
    }

    ::v-deep.el-radio__inner {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      background: #FAFBFC;
      border: 1px solid #D8E4EF;
      overflow: hidden;
      text-align: center;
      line-height: 32px;

      &::after {
        content: "☑️";
        display: block;
        color: #1890FF;
        font-size: 20px;
        width: 30px;
        height: 30px;
        background: #fff;
      }
    }
  }

  /*标题*/
  p {
    font-size: 16px;
    font-weight: 500;
    color: rgba(17, 38, 60, 1);
    border-left: 4px solid #116BFF;
    padding-left: 10px;
    margin-bottom: 20px;
    line-height: normal;
  }

  /*列表*/
  ::v-deep.el-table {
    border-radius: 16px 16px 0 0;

    th {
      height: 50px;
      background: #488DFE;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #fff;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    td {
      height: 50px;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #3D3D3D;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    .el-table__body tr {
      &:nth-child(odd) {
        background-color: #FEFEFE;
      }

      &:nth-child(even) {
        background-color: #F8FAFE;
      }
    }

    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        height: 10px;
      }

      &::-webkit-scrollbar-track {
        background-color: #E4E8F5;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #3380FD;
      }
    }

    .status {
      display: block;
      width: 54px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      opacity: 0.8;
      border-radius: 4px;
      font-size: 12px;
      transition: opacity 0.3s ease-in-out;
    }

    .normal {
      color: #00B3A7;
      background-color: #E0F7FA;
    }

    .tradingIn {
      color: #FFA500;
      background-color: #ffeac9;
    }

    .soldOut {
      color: #FF0000;
      background-color: #ffdada;
    }

    .abnormal {
      color: #FF00FF;
      background-color: #FFE4FF;
    }

    .cancelled {
      color: #a19f9f;
      background-color: #ececec;
    }
  }

  /*分页*/
  .pagination {
    background-color: transparent !important;

    ::v-deep.el-pagination {
      display: flex;
      align-items: center;

      .number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 8px;
      }

      .el-pager > .el-icon {
        height: 40px;
        width: 40px;
        background: #fff;
        line-height: 40px;
        border-radius: 8px;
      }
    }
  }
}

/*新增*/
::v-deep .el-dialog {
  width: 849px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 1);

  p {
    margin: 0 0 0 20px;
    font-size: 18px;
    font-weight: 400;
    color: rgba(17, 38, 60, 1);
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 10px;
    margin-bottom: 15px;
    margin-left: 0;
  }

  ::v-deep .el-dialog__footer {
    display: flex;
    justify-content: center;
    align-items: center;

    ::v-deep.cancel {
      background: #B5C2D8;
      color: #fff;
      border: none;

      &:hover {
        opacity: .8;
      }
    }

    ::v-deep.confirm {
      background-color: #116BFF;
      color: #fff;

      &:hover {
        opacity: .8;
      }
    }
  }

  .el-input-number {
    width: 165px;

    .el-input {
      width: 165px;

      .el-input__inner {
        width: 165px;
        border: 1px solid rgba(127, 127, 213, 0.5);
        border-radius: 0px;
      }
    }
  }

  .el-dialog__title {
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 8px;
  }
}

.wrap_img {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #c1c1c1;
  width: 100%;
  height: 90px;

  div {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  ::v-deep.el-upload {
    width: 100%;
    height: 100%;
  }

  .avatar-uploader-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}

.show-img {
  position: relative;
  display: flex;
  margin-right: 8px;
  height: 90px;
  width: 90px;

  .icon {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 20px;
    z-index: 1;
    cursor: pointer;
  }
}
</style>

<template>
  <div class="app-container">
    <div class="start">
      <!--查询-->
      <el-form ref="queryForm" size="small" :model="queryParams">
        <el-row type="flex" class="rows">
          <el-col class="cols">
            <el-form-item prop="status">
              <el-select v-model="queryParams.status" clearable placeholder="状态：请选择状态" @change="getList(1)">
                <el-option v-for="item in recycleStatusList" :key="item.dictValue" :label="item.dictLabel"
                           :value="item.dictValue"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="account">
              <el-input @keyup.enter.native="getList(1)" v-model="queryParams.account" clearable
                        placeholder="账号：请输入游戏账号"/>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="recycleNumber">
              <el-input @keyup.enter.native="getList(1)" v-model="queryParams.recycleNumber" clearable
                        placeholder="回收编号：请输入回收编号"/>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="phone">
              <el-input @keyup.enter.native="getList(1)" v-model="queryParams.phone" clearable
                        placeholder="绑定手机：请输入绑定手机"/>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="recycleId">
              <el-select v-model="queryParams.recycleId" clearable
                         placeholder="回收客服：请选择回收客服" @change="getList(1)">
                <el-option v-for="item in recycleList" :key="item.userId" :label="item.nickName" :value="item.userId"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col class="cols">
            <el-form-item prop="recycleId">
              <el-select v-model="queryParams.changeId" clearable
                         placeholder="换绑客服：请选择换绑客服" @change="getList(1)">
                <el-option v-for="item in changeList" :key="item.userId" :label="item.nickName" :value="item.userId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="btns">
          <!--刷新-->
          <div class="wrap" @click="getList('')">
            <img src="../../../assets/images/refresh.png"/>
          </div>

          <!--重置-->
          <div class="wrap" @click="resetQuery">
            <img src="../../../assets/images/search.png"/>
          </div>
          <el-button type="primary" size="mini" @click="handleOpen('add')" v-hasPermi="['business:recycle:add']">新增回收单<i
            class="el-icon-plus el-icon--right"></i></el-button>
        </div>
      </el-form>

      <!--单选分类查询-->
      <el-radio-group v-model="queryParams.dictCodeId" @input="getList(1)">
        <el-radio label="">全部</el-radio>
        <el-radio v-for="item in gameList" :label="item.dictCode" :key="item.dictCode">{{ item.dictLabel }}</el-radio>
      </el-radio-group>
    </div>

    <p>交易管理列表</p>
    <!--列表-->
    <el-table v-loading="loading" :data="recycleDataList" @selection-change="handleSelectionChange">
      <el-table-column label="编号" align="center" min-width="80" fixed>
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="游戏品类" align="center" prop="dictCodeName" min-width="100"/>
      <el-table-column label="绑定手机号" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.phoneNumber ? scope.row.phoneNumber : '/' }}
        </template>
      </el-table-column>
      <el-table-column label="手机编号" align="center" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.phoneCode ? scope.row.phoneCode : '/' }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1" class="status normal">未 售</span> <span v-if="scope.row.status == 2"
                                                                                      class="status tradingIn">已完成</span>
          <span v-if="scope.row.status == 3" class="status soldOut">异 常</span> <span v-if="scope.row.status == 4"
                                                                                       class="status abnormal">交易中</span>
          <span v-if="scope.row.status == 5" class="status cancelled">已取消</span>
        </template>
      </el-table-column>
      <el-table-column label="账号编号" align="center" prop="identifying" min-width="80"/>
      <el-table-column label="账号描述" min-width="200" align="center">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top" class="custom-popover">
            <p class="hover-multi-line">{{ $line(scope.row.accountDescription) }}</p>
            <div slot="reference" class="hover-slot-line">{{ scope.row.accountDescription }}</div>
            <div style="text-align: center;">
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.accountDescription)">复制
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="账号" align="center" prop="account" min-width="160" :show-overflow-tooltip="true"/>
      <el-table-column label="密码" align="center" prop="password" min-width="120"/>
      <el-table-column label="回收金额" align="center" prop="recycleAmount" min-width="100"/>
      <el-table-column label="回收渠道" align="center" prop="recycleChannelName" min-width="80"/>
      <el-table-column label="回收客服" align="center" prop="recycleUserName" min-width="80"/>
      <el-table-column label="换绑客服" align="center" prop="changeName" min-width="80"/>
      <el-table-column label="回收编号" align="center" prop="recycleNumber" min-width="160">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top" class="custom-popover">
            <p class="hover-multi-line">{{ $line(scope.row.recycleNumber) }}</p>
            <div slot="reference" class="hover-slot-line">{{ scope.row.recycleNumber }}
            </div>
            <div style="text-align: center;">
              <el-button type="primary" plain size="mini" @click="handleCopy(scope.row.recycleNumber)">复制</el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="订单时间" align="center" prop="createTime" min-width="180"/>
      <el-table-column label="订单备注" align="center" prop="remark" min-width="120" :show-overflow-tooltip="true"/>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="250">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 4">
            <el-button size="mini" type="text" @click="handleOpen('complete', scope.row)"
                       v-hasPermi="['business:recycle:complete']">
              <span style="color: rgba(83, 90, 244, 1);">
                完成交易
              </span>
            </el-button>
            <el-button size="mini" type="text" @click="handleProblem(scope.row)"
                       v-hasPermi="['business:recycle:question']">
              <span style="color: rgba(83, 90, 244, 1);">
                转问题
              </span>
            </el-button>
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['business:recycle:edit']">
              <span style="color: rgba(83, 90, 244, 1);">修改</span>
            </el-button>
            <el-button size="mini" type="text" @click="pulsTopicPhoneByid(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);">开始换绑</span>
            </el-button>
            <el-button size="mini" type="text" @click="pulsValidate(scope.row)">
              <span style="color: rgba(83, 90, 244, 1);">发送验证码</span>
            </el-button>
          </div>
          <div v-if="scope.row.status == 2">
            <el-button size="mini" type="text" @click="cancelTheOrder(scope.row)"
                       v-hasPermi="['business:recycle:question']">
              <span style="color: rgba(83, 90, 244, 1);">
                取消订单
              </span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination class="pagination" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList('')"/>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="isTransactionComplete ? completeRules : editRules" label-width="80px"
               class="myfroms">
        <div class="mytxt">
          <el-row>
            <el-col :span="8">
              <el-form-item label="游戏品类" prop="dictCodeId">
                <el-select v-model="form.dictCodeId" placeholder="请选择游戏品类" @change="handleGameCategoryChange">
                  <el-option v-for="item in gameList" :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收编号" prop="recycleNumber">
                <el-input v-model="form.recycleNumber" placeholder="请输入回收编号"
                          :disabled="this.isTransactionComplete"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收渠道" prop="recycleChannelId">
                <el-select v-model="form.recycleChannelId" placeholder="请选择回收渠道"
                           :disabled="this.isTransactionComplete">
                  <el-option v-for="   item    in    recycleChannelList   " :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="账号" prop="account">
                <el-input v-model="form.account" placeholder="请输入账号" :disabled="this.isTransactionComplete"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" :disabled="this.isTransactionComplete"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="原密码" prop="altesPasswort">
                <el-input v-model="form.altesPasswort" placeholder="请输入密码" :disabled="this.isTransactionComplete"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="区服" prop="region">
                <el-select filterable v-model="form.region" placeholder="请选择区服">
                  <el-option v-for="item in regionalServers" :key="item.id" :label="item.gameField"
                             :value="item.gameField"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="账号描述" prop="accountDescription" :disabled="this.isTransactionComplete">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.accountDescription"
                          placeholder="请输入账号描述" :disabled="this.isTransactionComplete"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item>
                <el-button :disabled="!form.accountDescription || !form.dictCodeId" type="primary" plain
                           @click="handleDealAccounts('accountDescription')">自动识别
                </el-button>
                <el-button :disabled="!form.dictCodeId" type="primary" plain :loading="loading" @click="getWzpfs">皮肤获取
                </el-button>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="副标题" prop="description">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.description"
                          placeholder="请输入副标题"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收金额" prop="recycleAmount">
                <el-input v-model="form.recycleAmount" placeholder="请输入回收金额"
                          :disabled="this.isTransactionComplete"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="销售金额" prop="saleAmount">
                <el-input v-model="form.saleAmount" placeholder="请输入销售金额"
                          :disabled="this.isTransactionComplete"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="绑定类目" prop="bindingChannelId">
                <el-select @change="changeChannel" v-model="form.bindingChannelId" placeholder="请选择绑定类目"
                           :disabled="this.isTransactionComplete">
                  <el-option v-for="item in bindingChannelList" :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="选择手机" prop="phoneId">
                <div style="display: flex; align-items: center;">
                  <el-select @change="changePhone" filterable v-model="form.phoneId" placeholder="请选择绑定手机"
                             :disabled="this.isTransactionComplete">
                    <el-option v-for="item in phoneList" :key="item.phoneId" :label="item.phoneNumber"
                               :value="item.phoneId"></el-option>
                  </el-select>
                  <el-button type="info" icon="el-icon-copy-document" @click="handleCopy(form.phoneNumber)"
                             style="color:#fff;margin-left: 10px;background: linear-gradient(268.09deg, #6067fa 0%, #7799fc 100%);"></el-button>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="手机编号" prop="phoneCode">
                <el-input disabled v-model="form.phoneCode" placeholder="请先选择手机编号"
                          :disabled="this.isTransactionComplete"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="换绑客服" prop="changeId"
                            :rules="{ required: true, message: '换绑客服不能为空！', trigger: 'change' }">
                <el-select v-model="form.changeId" placeholder="请选择换绑客服" :disabled="this.isTransactionComplete">
                  <el-option v-for="   item    in    changeList   " :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收客服" prop="recycleId"
                            :rules="{ required: true, message: '回收客服不能为空！', trigger: 'change' }">
                <el-select v-model="form.recycleId" placeholder="请选择回收客服" :disabled="this.isTransactionComplete">
                  <el-option v-for="   item    in  recycleList " :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="备注" prop="remark" :disabled="this.isTransactionComplete">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.remark"
                          placeholder="请输入备注"
                          :disabled="this.isTransactionComplete"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="通用图片">
                <el-row>
                  <el-col :span="3" v-for="(item, indx) in form.imagess" :key="indx"
                          style="margin-bottom:10px;width: 90px;">
                    <div class="show-img">
                      <i class="el-icon-error icon" @click="handleDel(indx, 'imagess')"/>
                      <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.imagess"/>
                    </div>
                  </el-col>

                  <el-col :span="3">
                    <div class="wrap_img">
                      <el-upload :action="imgUrl + '/common/upload'" :show-file-list="false" multiple
                                 :on-success="handleSuccess" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="螃蟹图片">
                <el-row>
                  <el-col :span="3" v-for="(item, indx) in form.pxImagess" :key="indx">
                    <div class="show-img">
                      <i class="el-icon-error icon" @click="handleDel(indx, 'pxImagess')"/>
                      <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.pxImagess"/>
                    </div>
                  </el-col>

                  <el-col :span="3" v-if="!disabled">
                    <div class="wrap_img">
                      <el-upload :action="imgUrl + '/common/upload'" :show-file-list="false" multiple
                                 :on-success="handleSuccess2" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="盼之图片">
                <el-row>
                  <el-col :span="3" v-for="(item, indx) in form.pzImagess" :key="indx" style="width: 90px;">
                    <div class="show-img">
                      <i class="el-icon-error icon" @click="handleDel(indx, 'pzImagess')"/>
                      <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.pzImagess"/>
                    </div>
                  </el-col>
                  <el-col :span="3" v-if="!disabled">
                    <div class="wrap_img">
                      <el-upload :action="imgUrl + '/common/upload'" :show-file-list="false" multiple
                                 :on-success="handleSuccess3" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="mystatu">
          <p>属性信息</p>
          <div v-for="(child, ii) in result" :key="child.id" class="render"
               v-if="form.dictCodeId && result && result.length > 0">
            <!--下拉框-->
            <el-form-item v-if="child.fieldType === 'select' && child && child.children && child.children.length > 0"
                          :label="child.gameField" :prop="'dropDown_' + child.id"
                          :rules="{ required: child.isRequired == 1 ? true : false, message: child.gameField + '不能为空', trigger: 'change' }">
              <el-select :disabled="disabled" v-model="form['dropDown_' + child.id]">
                <el-option v-for="(item, indx) in child.children" :key="indx" :label="item.gameField"
                           :value="parseInt(item.id)"/>
              </el-select>
            </el-form-item>

            <!--输入框-->
            <div style="display: flex; flex-wrap: wrap; gap: 10px;"
                 v-if="child && child.fieldType === 'input' && child.children && child.children.length > 0"
                 class="yingdi_input">
              <el-form-item v-for="item in child.children" :key="item.id" :label="item.gameField"
                            :prop="'inputValues_' + item.id"
                            :rules="{ required: child.isRequired == 1 ? true : false, message: item.gameField + '不能为空', trigger: 'blur' }">
                <el-input :disabled="disabled" placeholder="请输入" v-model="form['inputValues_' + item.id]"></el-input>
              </el-form-item>
            </div>

            <!--radio 单选框-->
            <el-form-item v-if="child.fieldType === 'radio' && child && child.children && child.children.length > 0"
                          :label="child.gameField" :prop="'radioValues_' + child.id"
                          :rules="{ required: child.isRequired == 1 ? true : false, message: child.gameField + '不能为空', trigger: 'change' }">
              <el-radio-group :disabled="disabled" v-model="form['radioValues_' + child.id]">
                <el-radio v-for="option in child.children" :key="option.id" :label="option.id">
                  {{ option.gameField }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <!--checkbox 多选框-->
            <el-form-item v-if="child.fieldType === 'checkbox' && child && child.children && child.children.length > 0"
                          :label="child.gameField" :prop="'checkbox_' + child.gameKey"
                          :rules="[{ type: 'array', required: child.isRequired == 1 ? true : false, message: '请至少选择一个' + child.gameField, trigger: 'change' }]">
              <el-checkbox-group v-model="form['checkbox_' + child.gameKey]"
                                 v-if="child.gameKey && form['checkbox_' + child.gameKey]">
                <el-checkbox :disabled="disabled" v-for="item in child.children" :key="item.id" :label="item.id">
                  {{ item.gameField }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 转问题对话框 -->
    <el-dialog title="转问题" :visible.sync="openProblem" width="480px" append-to-body :close-on-click-modal="false">
      <el-form ref="formProblem" :model="formProblem" label-width="100px">
        <el-form-item label="问题类型：">
          <el-select v-model="formProblem.problemType" placeholder="请选择问题类型">
            <el-option label="订单交接" value="OrderHandover"></el-option>
            <el-option label="取消订单" value="OrderCancelled"></el-option>
          </el-select>
        </el-form-item>

        <div v-show="formProblem.problemType == 'OrderHandover'">
          <el-form-item label="交接客服：">
            <el-select v-model="formProblem.changeId" placeholder="请选择问题类型">
              <el-option v-for="   item    in  changeList " :key="item.userId" :label="item.userName"
                         :value="item.userId"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="交接原因：">
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formProblem.abnormityReason"
                      placeholder="请输入交接原因"/>
          </el-form-item>
        </div>
        <div v-show="formProblem.problemType == 'OrderCancelled'">
          <el-form-item label="取消原因：">
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formProblem.remark"
                      placeholder="请输入取消原因"/>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormProblem">确 定</el-button>
        <el-button @click.native="cancelProblem">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 验证码弹框 -->
    <el-dialog title="验证码" :visible.sync="isvalidate" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="validateForm" :model="validateForm" label-width="120px">
        <el-form-item label="账号">
          <el-input disabled v-model="validateForm.account" style="width: 300px;"/>
        </el-form-item>

        <el-form-item label="验证码" prop="saleAmount">
          <el-input v-model="validateForm.validate" placeholder="请输验证码" style="width: 300px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelValidate">取 消</el-button>
        <el-button type="primary" @click="submitValidateFrom">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRecycle,
  getRecycle,
  delRecycle,
  addRecycle,
  updateRecycle,
  complete,
  transferToIssue,
  cancelTheOrder,
  pulsTopicPhone,
  getValidate
} from '@/api/business/recycle'
import {unboundPhonesByCategory} from '@/api/business/staylnventory'
import env from "@/utils/config.js";
import {getGameDict, refreshCache} from '@/api/business/recyleGameDict.js'
import {myMixins} from "@/mixins/index.js";
import staylnventoryView from "@/components/staylnventoryView/index.vue";
import {getSkin} from "@/api/business/staylnventory";
import {mapState} from "vuex";
import {readNotice} from "@/api/system/user";

export default {
  name: 'Recycle',
  mixins: [myMixins],
  components: {staylnventoryView},
  data() {
    return {
      imgUrl: '',//上传图片地址
      currentSelection: [],
      inputValues: [],
      // 下拉
      dropDown: [],
      // 属性配置回显
      result: [],
      //区服列表
      regionalServers: [],
      isTransactionComplete: false,
      //销售渠道
      saleChannelList: [],
      //库存状态列表
      stockStatusList: [],
      //绑定手机列表
      phoneList: [],
      //换绑客服
      changeList: [],
      //回收客服
      recycleList: [],
      //销售客服
      sellList: [],
      //二次实名
      secondaryRealNameList: [],
      //回收列表
      recycleChannelList: [],
      //渠道列表
      bindingChannelList: [],
      //游戏列表
      gameList: [],
      //回收状态列表
      recycleStatusList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      recycleDataList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 是否显示转问题弹出层
      openProblem: false,
      // 验证码弹框
      isvalidate: false,
      //验证码弹框
      validateForm: {
        account: null,
        validate: null
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictCodeId: '',
        phoneRemark: null,
        status: null,
        accountDescription: null,
        account: null,
        password: null,
        recycleAmount: null,
        recycleChannelId: null,
        recycleId: null,
        changeId: null,
        recycleNumber: null,
        orderNumber: null,
        phone: null,
        recycleName: '',
        changeName: ''
      },
      // 表单参数
      form: {
        radioSelections: [],
        inputDataArray: [],
        checkList: [],
        dropDown: [], // 确保这里已经初始化
        imagess: []
      },
      // 转问题表单参数
      formProblem: {},
      //当前绑定的手机号和渠道
      bindingChannelId: '',
      phoneData: {
        phoneCode: null,
        phoneId: null,
        phoneNumber: null
      },
      // 表单校验 /
      editRules: {
        dictCodeId: [
          {required: true, message: '游戏品类不能为空', trigger: 'blur'}
        ],
      },
      completeRules: {
        dictCodeId: [
          {required: true, message: '游戏品类不能为空', trigger: 'blur'}
        ],
        recycleChannelId: [
          {required: true, message: '回收渠道不能为空', trigger: 'change'}
        ],
        recycleNumber: [
          {required: true, message: '回收编号不能为空', trigger: 'blur'}
        ],
        account: [
          {required: true, message: '账号不能为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ],
        accountDescription: [
          {required: true, message: '账号描述不能为空', trigger: 'blur'}
        ],
        recycleAmount: [
          {required: true, message: '回收金额不能为空', trigger: 'blur'}
        ],
        saleAmount: [
          {required: true, message: '销售金额不能为空', trigger: 'blur'}
        ],
        bindingChannelId: [
          {required: true, message: '绑定类目不能为空', trigger: 'change'}
        ],
        phoneId: [
          {required: true, message: '绑定手机不能为空', trigger: 'change'}
        ],
        changeId: [
          {required: true, message: '换绑客服不能为空', trigger: 'blur'}
        ],
        recycleUserId: [
          {required: true, message: '回收客服不能为空', trigger: 'blur'}
        ],
        remark: [
          {required: true, message: '备注不能为空', trigger: 'blur'}
        ]

      }
    }
  },
  created() {
    this.imgUrl = env;
    this.getList()
    //查询游戏列字典
    this.getDicts('game_category').then(res => {
      this.gameList = res.data
    })
    //查询状态字典
    this.getDicts('recycle_status').then(res => {
      this.recycleStatusList = res.data
    })
    //查询回收客服
    this.passPost('recycle').then(res => {
      this.recycleList = res.data
    })
    //查询换绑客服
    this.passPost('change').then(res => {
      this.changeList = res.data
    })
    //查询绑定渠道字典
    this.getDicts('binding_channel').then(res => {
      this.bindingChannelList = res.data
    })
    //查询回收渠道字典
    this.getDicts('recycle_channel').then(res => {
      this.recycleChannelList = res.data
    })
    //查询二次实名字典
    this.getDicts('secondary_real_name').then(res => {
      this.secondaryRealNameList = res.data
    })
    //查询销售客服
    this.passPost('sell').then(res => {
      this.sellList = res.data
    });
    console.log(this.$route.path);

    //获取websocket 传递的类型
    const account = this.$route.query.msg;
    if (account) {
      this.isvalidate = true;
      this.validateForm.account = account;
    }
  },

  methods: {
    // 输入验证码
    pulsValidate(row) {
      this.isvalidate = true,
        this.resetValidate(),
        this.validateForm.account = row.account
    },
    cancelValidate() {
      this.resetValidate(),
        this.isvalidate = false
    },

    //验证码表单重置
    resetValidate() {
      this.validateForm = {
        account: "",
        validate: ""
      }
      this.resetForm('validateForm')
    },
    //提交验证信息
    submitValidateFrom() {
      getValidate(this.validateForm).then((res) => {
        if (res.code == 200) {
          this.isvalidate = false,
            this.resetValidate(),
            this.$modal.msgSuccess("发送成功");
        } else {
          this.$modal.msgSuccess(res.msg);
        }
      });
    },

    //开始换绑
    pulsTopicPhoneByid(row) {
      this.$modal.confirm('是否开始查询换绑账号为"' + row.account + '"的数据项？').then(function () {
        return pulsTopicPhone(row.id);
      }).then(() => {
        this.$modal.msgSuccess("开始查询");
      }).catch(() => {
      });
    },


    // 添加待处理
    handleDealAccounts(type) {
      if (this.result.length > 0) {
        this.result.map(item => {
          if (item.fieldType == 'checkbox' && item.children && item.children.length > 0) {
            let children = item.children;
            children.map(ii => {
              if (this.form[type] && this.form[type].indexOf(ii.gameField) > -1) {
                if (this.form['checkbox_' + item.gameKey] && !this.form['checkbox_' + item.gameKey].includes(ii.id)) {
                  this.form['checkbox_' + item.gameKey].push(ii.id);
                }
              }
            })
          }
        })
      }
    },

    // 营地id查询
    getWzpfs() {
      // 获取营地id
      let that = this;
      const inputs = document.getElementsByClassName("yingdi_input");
      for (let i = 0; i < inputs.length; i++) {
        const labelText = inputs[i].getElementsByTagName('label')[0].innerHTML;
        if (labelText == '营地ID') {
          const val = inputs[i].getElementsByTagName("input")[0].value;
          if (val) {
            that.loading = true;
            getSkin(val).then(res => {
              this.loading = false;
              if (res.code == 200) {
                that.form.description = res.msg;
                that.handleDealAccounts('description');
              } else {
                that.$message.error(res.msg);
              }
            }).catch(() => {
              that.loading = false;
            })
          }
        }
      }
    },

    // 后边添加上传图片
    handleSuccess(res, file, fileList) {
      this.form.imagess.push(res.url);
    },

    // 后边添加上传图片
    handleSuccess2(res, file, fileList) {
      this.form.pxImagess.push(res.url);
    },

    // 后边添加上传图片
    handleSuccess3(res, file, fileList) {
      this.form.pzImagess.push(res.url);
    },

    // 删除照片
    handleDel(indx, type) {
      this.form[type].splice(indx, 1);
    },

    // 上传图片判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }
      return true // 如果检查通过，返回 true
    },

    handleCopy(e) {
      if (e) {
        const el = document.createElement('textarea');
        el.value = e;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        // 通知用户已复制
        this.$message({
          message: '复制成功！',
          type: 'success'
        });
      }
    },

    // 取消订单
    cancelTheOrder(row) {
      this.form = {...row}
      cancelTheOrder(this.form).then(response => {
        this.$modal.msgSuccess('操作成功')
        this.getList()
      })
    },

    // 游戏品类
    handleGameCategoryChange() {
      this.regionalServers = [];
      this.listDictData({
        dictCodeId: this.form.dictCodeId
      });
    },

    //转问题 取消按钮
    cancelProblem() {
      this.openProblem = false
      this.resetProblem()
    },

    //转问题 表单重置
    resetProblem() {
      this.formProblem = {
        problemType: null
      }
      this.resetForm('formProblem')
    },

    /** 转问题按钮操作 */
    handleProblem(row) {
      this.resetProblem()

      this.formProblem = {...row}
      this.openProblem = true
    },

    /** 转问题 确认提交 */
    submitFormProblem() {
      this.$refs['formProblem'].validate(valid => {
        if (valid) {
          transferToIssue(this.formProblem).then(response => {
            if (response.code == 200) {
              this.$modal.msgSuccess('操作成功')
              this.openProblem = false
              this.getList()
            }
          }).catch((err) => {
            this.$message.error('参数不全，请补全回收单后操作');
          })
        }
      })
    },

    //选中分类事件
    changeChannel(value) {
      this.form.phoneId = null
      this.form.phoneCode = null
      this.bindingChannelList.forEach(item => {
        if (item.dictCode == value) {
          unboundPhonesByCategory(item.dictValue).then(res => {
            this.phoneList = res.data
            if (this.bindingChannelId == value) {
              this.phoneList.unshift(this.phoneData)
            }
          })
          return
        }
      })
    },

    /** 查询列表 */
    getList(num) {
      if (num) this.queryParams.pageNum = num;

      this.loading = true
      listRecycle(this.queryParams).then(response => {
        this.recycleDataList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    // 取消按钮
    cancel() {
      this.open = false
      this.isTransactionComplete = false
      this.reset()
    },

    // 表单重置
    reset() {
      this.form = {
        phoneCode: null,
        phoneId: null,
        attribute: {},
        imagess: [],
        checkList: []
      }
      // 重置区服列表
      this.regionalServers = [];
      // 重置多选
      this.resetForm('form')
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList(1);
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.recycleId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 新增、修改、完成 按钮操作 */
    handleOpen(type, row) {
      this.reset();
      this.open = true;
      if (type == 'add') {
        this.title = '新建回收单'
        this.radioSelections = {}
      } else {
        this.title = '完成交易'
        this.isTransactionComplete = true;
        this.listDictData(row, '完成交易');
      }
    },

    /** 提交按钮 */
    submitForm() {
      let dropDownMap = {}, inputValuesObj = {}, radioSelectionsObj = {}, info = {}, checkboxArr = [];
      for (var key in this.form) {
        // 下拉框
        if (key.indexOf('dropDown') > -1) {
          dropDownMap[key.split('_')[1]] = this.form[key];
        }

        // 输入框
        if (key.indexOf('inputValues') > -1) {
          inputValuesObj[key.split('_')[1]] = this.form[key]
        }

        // 单选框
        if (key.indexOf('radioValues') > -1) {
          radioSelectionsObj[key.split('_')[1]] = this.form[key]
        }

        // 多选框
        if (key.indexOf('checkbox') > -1) {
          info[key] = this.form[key];
          checkboxArr = checkboxArr.concat(this.form[key])
        }
      }

      let attr = {
        radioSelections: radioSelectionsObj,
        dropDown: dropDownMap,
        inputValues: inputValuesObj,
        checkbox: info,
        checkList: checkboxArr
      };

      this.form.attribute = attr;
      this.form.answer = JSON.stringify(attr);

      if (this.title == '新建回收单') {
        this.$refs['form'].validate(valid => {
            if (valid) {
              addRecycle(this.form).then(response => {
                this.$modal.msgSuccess('新增成功')
                this.open = false
                this.getList()
              })
            }
          }
        )
      }
      if (this.title == '修改') {
        this.$refs['form'].validate(valid => {
          if (valid) {
            updateRecycle(this.form).then(response => {
              this.$modal.msgSuccess('编辑成功')
              this.open = false
              this.getList()
            })
          }
        });
      }
      //
      if (this.title == '完成交易') {
        this.$refs['form'].validate(valid => {
          if (valid) {
            complete(this.form).then(response => {
              if (response.code == 200) {
                this.$modal.msgSuccess('完成交易成功')
                this.open = false
                this.getList()
              }
            })
          }
        })
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const recycleIds = row.recycleId || this.ids
      this.$modal.confirm('是否确认删除编号为"' + recycleIds + '"的数据项？').then(function () {
        return delRecycle(recycleIds)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('system/recycle/export', {
        ...this.queryParams
      }, `recycle_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
